<template>
	<div>
		<!-- 选择处置卡弹窗 -->
    <el-dialog 
      title="选择应急处置卡"
      append-to-body
      :visible.sync="chooseEmergencyDialog"
      :close-on-click-modal="false" 
      :before-close="handleCloseChooseEmergency"
      width="60%"
    >

      <!-- 表格内容 -->
      <avue-crud 
        :option="emergencyOption"
        :data="emergencyData.filter((item) => item.czkbh.includes(filterEmergencyName))"
        @selection-change="emergencySelectionChange"
        ref="emergencyCrud"
      >
        <template slot="menuLeft">
          <el-input
            placeholder="请输入处置卡编号"
            v-model="filterEmergencyName"
            size="small">
          </el-input>
        </template>
      </avue-crud>

      <!-- 按钮 -->
      <div class="choose_user_footer">
        <el-button 
          type="primary"
          size="small"
          @click="chooseEmergency()">
          确 认
        </el-button>
        <el-button 
          size="small"
          @click="cancleChooseEmergency()">
          取 消
        </el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
import { getEmergencyCardList } from "@/api/saferisk/riskpoint";

const tenantId = JSON.parse( localStorage.getItem("saber-tenantId") ).content;

export default {
  props: {
    chooseEmergencyDialog: {default: false},
    filterEmergencyName: {default: ""},
    selectEmergencyTags: {default: []}
  },
  data() {
    return {
      emergencyData: [],
      emergencySelectionList: [],
      emergencyOption: {
        calcHeight: 30,
        tip: false,
        index: true,
        selection: true,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        column: [
          {
            label: "应急卡名称",
            prop: "czkmc",
            align: "center"
          },
          {
            label: "处置卡编号",
            prop: "czkbh",
            align: "center"
          },
          {
            label: "岗位名称",
            prop: "glgwmc",
            align: "center",
            type: "select",
            dicUrl: "/api/blade-system/post/select?tenantId=" + tenantId,
            props: {
              label: "postName",
              value: "id",
            }
          },
          {
            label: "主要负责人",
            prop: "zyzrr",
            align: "center",
            type: "select",
            dicUrl: "/api/riskPoint/riskmanagement/getInternalStaff",
            props: {
              label: "realName",
              value: "id",
            }
          },
          {
            label: "内部应急电话",
            prop: "nbyjdh",
            align: "center"
          },
          {
            label: "外部应急电话",
            prop: "wbyjdh",
            align: "center"
          }
        ]
      }
    }
  },
  watch: {
    chooseEmergencyDialog(){
      if(this.chooseEmergencyDialog === true){
        this.initData();
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    // 初始化选择应急处置卡弹窗
    initData() {
      this.getEmergencyCards();
    },

    // 获取应急处置卡列表
    getEmergencyCards() {
      getEmergencyCardList().then(res => {
        this.emergencyData = res.data.data;
      }).then(() => {
        this.checkSelectedEmergencies();
      });
    },

    // 勾选已在列表中的应急处置卡
    checkSelectedEmergencies() {
      if(this.selectEmergencyTags.length !== 0) {
        let emergencyIds = [];
        this.selectEmergencyTags.forEach(item => {
          emergencyIds.push(item.id);
        });
        this.$nextTick(() => {
          this.emergencyData.forEach(row => {
            if(emergencyIds.indexOf(row.id) >= 0 && this.$refs.emergencyCrud !== undefined) {
              this.$refs.emergencyCrud.toggleRowSelection(row, true);
            }
          })
        });
      } else {
        if(this.$refs.emergencyCrud !== undefined) {
          this.$refs.emergencyCrud.toggleSelection();
        }
      }
    },

    // 勾选应急处置卡
    emergencySelectionChange(list) {
      this.emergencySelectionList = list;
    },

    // 确认勾选应急处置卡
    chooseEmergency() {
      if(this.emergencySelectionList.length === 0) {
        this.$message.warning("请选择应急处置卡!");
        return;
      }
      if(this.emergencySelectionList.length > 3) {
        this.$message.warning("最多选择3张应急处置卡!");
        return;
      }
      this.$emit('chooseEmergency', this.emergencySelectionList);
    },

    // 关闭选择应急处置卡弹窗
    cancleChooseEmergency() {
      this.$emit('cancleChooseEmergency');
    },

    // 关闭选择应急处置卡弹窗
    handleCloseChooseEmergency(done) {
      done();
      this.$emit('handleCloseChooseEmergency');
    },

  }
}
</script>